<template>
	<view class="index-container">
		<view class="titleStyPOs">
			<!-- <div style="height: 50rpx;"></div> -->
			<!-- <view :style="{height: statusBarHeight + 'px'}"></view>
			<Title :title="title" /> -->
			<CommonHeader :title="$t('服务账单')" ></CommonHeader>
			<view class="flex-start mt-50 center">
				<view class="ml-35 commonSty" :class="{ activeSty: current == index }"
				 :style="langR == 'zh'?'width:136rpx':'width:280rpx'"
					v-for="(item, index) in listTitle" @click="changeTitle(index)">
					{{ item }}
				</view>
			</view>
			<view v-if="current == 0" :class="langR=='ru'?'r_between between mr-30 mt-20':'between mr-30 mt-20'" 
			>
				<view class="ml-35 secondSty" :class="{ activeStySecond: currentJob == index }" 
					v-for="(item, index) in jobList" @click="changeSecondJob(index)">
					<view class="flex" >
						<p>{{ item }}</p>
						<p v-if="service_notices[index] > 0" class="circleSty"></p>
					</view>
				</view>
			</view>
			<view v-else :class="langR=='ru'?'r_between between mr-30 mt-20':'between mr-30 mt-20'">
				<view class="ml-35 secondSty" :class="{ activeStySecond: currentBuy == item.key }"
					
				
					v-for="(item, index) in buyList" @click="changeSecondBuy(item.key)">
					<view class="flex">
						<p>{{ item.title }}</p>
						<p v-if="buy_notice[index] > 0" class="circleSty"></p>
					</view>
					<!-- {{ item.title }}
					<p v-if="service_notices[index] > 0" class="circleSty"></p> -->
				</view>
			</view>
		</view>
		<!-- <view style="height: 360rpx;"></view> -->
		<view>
			<myByPage v-if="current == 1" :current="currentBuy" :supplierList="supplierList"></myByPage>
			<myJobPage v-else :current="currentJob" :supplierList="supplierList" @getListOrder="getListOrder"></myJobPage>
		</view>
		<view v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20" style="margin-bottom: 30rpx;">
			{{ $t('没有更多了') }}
		</view>
		<!-- <view v-if="current == 0" class="">
			<view class=" infoBoxSty pb-24" v-for="(item, index) in storeList" @click="goToCaigoDetail(item)">
				<view class="flex">
					<image :src="IMAGE_URL + item.avatar" mode="aspectFill" class="w-90 h-90 mt-10 ml-24 mb-10"
						style="border-radius: 500rpx;"></image>
					<view class="flex-1">
						<p class="ml-20 mr-20 fz28 mt-24 text-010 font-bold">{{ item.username }}</p>
						<view class="flex-start ml-20 mt-15">
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<span class="fz20 text-888 ml-10" style="margin-top: -5rpx;">综合{{$t('评分')}}: {{ get(item,
								'user_info.rating') }}</span>
						</view>
						<view class="flex-start mt-15 mb-24">
							<image v-if="item.area.country == 0" src="@/static/icon/zh.png" mode=""
								class="ml-20 w-30 h-20"></image>
							<image v-else src="@/static/icon/ru.png" mode="" class="ml-20 w-30 h-20"></image>
							<p class="fz20 text-888 ml-10">{{ get(item, 'area.mergename') }}</p>
						</view>
					</view>
				</view>
				<view class="infoMainSty">
					<image src="../../static/img/whiteGoldBusi.png" mode="widthFix" class="w-120 ml-16"></image>
					<p class="ml-15 mr-20">主营 : {{ item.main_product }} </p>
				</view>
			</view>

			<view class="h-30"></view>
			<view v-if="nomoreCaigo" class="center text-gray-500 fz24 pt-20 pb-20" style="margin-bottom: 30rpx;">
				没有更多了
			</view>
		</view>
		<view v-if="current == 1" class="">
			<view class=" infoBoxSty" v-for="(item, index) in supplierList" @click="goTogyDetail(item)">
				<view class="flex">
					<image :src="item.logo" mode="aspectFill" class="w-90 h-90 mt-10 ml-24 mb-10"
						style="border-radius: 500rpx;"></image>
					<view class="flex-1">
						<p class="ml-20 mr-20 fz28 mt-24 text-010 font-bold">{{ item.name }}</p>
						<view class="flex-start ml-20 mt-15">
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<span class="fz20 text-888 ml-10" style="margin-top: -5rpx;">综合{{$t('评分')}}: {{ item.comment_score
								}}</span>
						</view>
						<view class="flex-start mt-15 mb-24">
							<image v-if="item.country == 0" src="@/static/icon/zh.png" mode="" class="ml-20 w-30 h-20">
							</image>
							<image v-else src="@/static/icon/ru.png" mode="" class="ml-20 w-30 h-20"></image>
							<p class="fz20 text-888 ml-10 mr-24">{{ item.address }}</p>
						</view>
					</view>
				</view>
				<view class="infoMainSty">
					<image src="../../static/img/whiteGoldBusi.png" mode="widthFix" class="w-120 ml-16"></image>
					<p class="ml-15 mr-24">主营 : {{ item.desc }} </p>
				</view>
				<view v-if="item.prolist.length > 0" class="flex ml-15 mt-24 pb-24">
					<view class="" v-for="img in item.prolist">
						<image :src="img.pic" mode="aspectFill" class="w-155 h-155 ml-10"></image>
					</view>
				</view>
			</view>

			<view class="h-30"></view>
			
		</view> -->
	</view>
</template>

<script>
// import {
// 	getBlist
// } from '@/api/app.js'
import { getListOrder, getNotice, getNoticeDel } from '@/api/basic.js'
// import Title from '../components/title.vue'
import myByPage from './components/myByPage.vue'
import myJobPage from './/components/myJobPage.vue'
import CommonHeader from "@/pages/components/common-header.vue";
export default {
	components: {
		// Title,
		myByPage,
		CommonHeader,
		myJobPage
	},

	data() {
		return {
			listTitle: [this.$t('我的工作'), this.$t('我购买的')],
			statusBarHeight: uni.getStorageSync("statusBarHeight"),
			buyList: [
				{
					title: this.$t('订单'),
					key: 1
				},
				{
					title: this.$t('进行中'),
					key: 2
				},
				{
					title: this.$t('已完成'),
					key: 3
				},
				{
					title: this.$t('售后结果'),
					key: 4
				}],
			jobList: [this.$t('咨询者'), this.$t('我的订单'), this.$t('进行中'), this.$t('已完成'), this.$t('售后')],
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			current: 0,
			currentBuy: 1,
			currentJob: 0,
			keyword: '',
			title: this.$t('服务账单'),
			service_notices: [],
			buy_notice: [],
			storeList: [],
			params: {
				page: 1,
				limit: 10,
				user_id: uni.getStorageSync("user_id")
			},
			supplierList: [],
			idList: [],
			nomore: false,
			nomoreCaigo: false,
		}
	},
	watch: {
	},
	onLoad(options) {
		if (options.order) {
			this.current = JSON.parse(options.order)
		}
		if(options.statusBuy) {
			this.currentBuy = options.statusBuy
			this.getListOrder(true)
			this.getNotice()
			// this.getNoticeDel(2)
		}
		if(options.statusJob) {
			this.currentJob = options.statusJob
			this.getListOrder(true)
			this.getNotice()
			// this.getNoticeDel(1)
		}
	  },
	mounted() {
		this.getListOrder(true)
		this.getNotice()
		// this.getNoticeDel(1)
	},
	methods: {
		getNotice() {
			getNotice({user_id: uni.getStorageSync("user_id")}).then(res => {
				if(res.data.code == 200) { 
					this.service_notices = res.data.data.data.service_notices
					this.buy_notice = res.data.data.data.buy_notice
				} else {
					// uni.$u.toast(res.data.message)
					uni.$u.toast(res.data[this.plang('message')])
				}
			})
		},
		getNoticeDel(type) {
			// console.log('this.idList--22222', Object.assign(this.idList))
			const stringList = this.idList.length > 0 ? this.idList.join(',') : ''
			console.log('stringList---', stringList)
			getNoticeDel({ user_id: uni.getStorageSync("user_id") , id: stringList, type: type}).then(res => {
				console.log('1111111', res)
			})
		},
		changeTitle(index) {
			this.current = index
			this.supplierList = []
			this.getListOrder(true)
			this.getNotice()
			// this.getNoticeDel(index + 1)
		},
		changeSecondBuy(index) {
			this.currentBuy = index
			this.params.status = index
			this.supplierList = []
			this.getListOrder(true)
			this.getNotice()
			// this.getNoticeDel(2)
		},
		changeSecondJob(index) {
			this.currentJob = index
			this.params.status = index
			this.supplierList = []
			this.getListOrder(true)
			this.getNotice()
			// this.getNoticeDel(1)
		},
		getListOrder(init) {
			this.idList = []
			uni.showLoading({
				title: this.$t('加载中')
			});
			if (init) {
				this.params.page = 1
				this.nomore = false;
			}
			this.params.type = this.current + 1
			this.params.status = this.current == 0 ? this.currentJob : this.currentBuy
			getListOrder({...this.params}).then(res => {
				if (res.data.code == 200) {
					console.log( res.data.data.data,'skjhdkshdjk')
					if (this.params.page == 1) {
						this.supplierList = res.data.data.data || []
					} else {
						this.supplierList = [...this.supplierList, ...res.data.data.data]
					}
					// const arr = []
					this.idList = this.supplierList.map(item => item.id)
					// this.supplierList.map(item => {
					// 	this.idList.push(item.id)
					// })
					// this.idList = Object.assign(arr)
					// this.idList = JSON.parse(JSON.stringify(arr))
					console.log('this.idList----11111', this.supplierList)
					//当前请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}没有更多了
					if (this.get(res, 'data.data.data').length == 0 || this.get(res, 'data.data.data').length < 10) {
						this.nomore = true;
					}
					this.getNoticeDel(this.params.type)
				}
				uni.hideLoading()
				// 结束下拉刷新
				uni.stopPullDownRefresh()
			})
		},
		//上拉加载
		onReachBottom() {
			this.params.page++
			this.getListOrder()
			this.getNotice()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.getListOrder(true)
			this.getNotice()
		},
	}

}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
page {
	background: #F6F7FB;
}

.index-container {
	width: 100%;
	height: 100%;
	z-index: 60;
	// overflow: scroll;

	/deep/ .u-checkbox {
		width: 100% !important;
	}

	/deep/ .u-checkbox__label {
		width: 100% !important;
	}
}

.titleStyPOs {
	background: #F6F7FB url("/static/backcolorImg.png") no-repeat top / 100%;
	position: sticky;
	width: 100%;
	top: 0;
	z-index: 10;
	.circleSty {
		width: 20rpx;
		height: 20rpx;
		background-color: #FF0000;
		border-radius: 500rpx;
		margin-bottom: 26rpx;
		margin-left: -8rpx;
		// margin-right: 15rpx;
	}
}

.commonSty {
	color: #0E0E0E;
	font-family: PingFang SC;
	font-size: 28rpx;
	line-height: 32rpx;
	letter-spacing: 0px;
	height: 60rpx;
	width: 136rpx;
}
.activeSty {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 34rpx;
	letter-spacing: 0px;
	color: #278AFF;
	// border-bottom: 5rpx solid #4BB0FF;
}

.secondSty {
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	line-height: 60rpx;
	height: 60rpx;
	color: #0E0E0E;
}
.activeStySecond {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 28rpx;
	letter-spacing: 0px;
	color: #278AFF;
	border-bottom: 5rpx solid #4BB0FF;
	padding: 0 10rpx;
}

.searchSty {
	// width: 65% !important;
	flex: 1;
	// display: flex;
	margin-left: 26rpx !important;
	margin-top: 26rpx !important;
	margin-bottom: 30rpx !important;

	/deep/ .u-search__content {
		background-color: #fff !important;
		height: 78rpx !important;
		// position: relative;
		// z-index: 2;
	}

	/deep/ .u-input {
		background-color: #fff !important;
	}

	/deep/ .u-icon__icon {
		font-size: 46rpx !important;
		color: #74C2FF !important;
	}

	/deep/ .u-action {
		width: 110rpx !important;
		height: 50rpx !important;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%) !important;
		text-align: center;
		line-height: 50rpx;
		font-family: PingFang SC;
		color: #fff;
		font-weight: 500;
		font-size: 26rpx;
		letter-spacing: 0px;
		border-radius: 500rpx;
		position: absolute;
		z-index: 10;
		right: 20rpx;
	}

	/deep/ .u-search__action {
		width: 110rpx;
		height: 50rpx;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		line-height: 50rpx;
		letter-spacing: 0px;
		color: #fff;
		position: absolute;
		z-index: 10;
		right: 16rpx;
	}
}

.transport {
	min-width: 135rpx;
	// margin-left: 16rpx;
	display: flex;
	align-items: center;
}

.infoBoxSty {
	background-color: #fff;
	margin-left: 24rpx;
	margin-right: 24rpx;
	margin-top: 20rpx;
	border-radius: 20rpx;
	padding-bottom: 24rpx;
}

.infoMainSty {
	min-height: 54rpx;
	margin-left: 24rpx;
	margin-right: 24rpx;
	background-color: #FFF7EC;
	border-radius: 8rpx;
	// line-height: 54rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	p {
		font-size: 20rpx;
		color: #D58349;
	}
}
.r_between{
	overflow-x: scroll;
	.secondSty{
		line-height: 1.5;
		height: auto;
		white-space: nowrap;
			padding: 0 10rpx;
		text-overflow: ellipsis;
		font-size:24rpx;
	
		.flex{
			white-space: nowrap;
			padding: 0 10rpx;
		text-overflow: ellipsis;
		}
}
}

</style>
